<template>
  <div id="hourRank">
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-model="loading"
        v-if="rankList.length"
        :finished="finished"
        finished-text="我是有底线的"
        @load="onLoad"
        :immediate-check="false"
        class="list_box"
      >
        <div class="lp_box"
          v-for="(item, i) in rankList"
          :key="item.author_id"
          @click="LiveForDetails(item.author_id, item.room_id)"
        >
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_cover_box">
              <div class="lp_cover">
                <img v-lazy="item.room_logo" v-errorImg:live>
              </div>
              <div class="liveAnimation" v-if="item.status == 1">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="lp_title">
              <div class="lp_title_item">
                <img src="@/assets/one/shopcart.png" class="shopcart_img" v-if="item.is_shop == 1" />
                <img src="@/assets/one/redBag.png" class="redbag_img" v-if="item.is_red == 1" />
                <span>{{ item.room_title }}</span>
              </div>
              <div class="lp_user">
                <div class="lp_item_head"><img v-lazy="item.logo" v-errorImg:live /></div>
                <p>{{ item.nickname }}</p>
              </div>
            </div>
          </div>
          <div class="lp_footer">
            <div class="lpf_item"><strong>{{ format_num(item.live_volume) }}</strong><span>销量</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.live_sales) }}</strong><span>销售额</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.score) }}</strong><span>带货热度</span></div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom_Collection" v-if="!rankList.length && !loading_01">
      <img src="@/assets/three/noData.png" />
      <p v-if="isQzss">
        榜单中没有你想要的结果?
        <span @click="gosearch">全站搜索</span>
      </p>
      <p v-if="!isQzss">我是有底线的~</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hourRank',
  components: {},
  props: ['valueSerach'],
  data() {
    return {
      loading: false,
      loading_01:false,  //首个loading
      finished:false, 
      permissions: 1, //判断权限用的
      rankList: [],
      page:1,
      pageSize:20,
      rankListData:[],
      keyword: '',
      num: ['num1', 'num2', 'num3'],
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      isQzss: false // 是否显示 全站搜索的文案
    };
  },
  computed: {},
  watch: {
    valueSerach(val) {
      if (val == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.search('');
      }
    },
    newvalue1(newvalue1) {
      this.keyword = newvalue1;
    }
  },
  created() {
    this.get_data();
  },
  mounted() {},

  methods: {
    gosearch(val) {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 2, name: this.keyword }
      });
    },
    //跳转
    LiveForDetails(author_id, room_id) {
      this.$router.push({
        path: '/LiveForDetailsMain',
        query: { author_id, room_id }
      });
    },
    search(i) {
      this.page = 1;
      this.finished = false;
      this.rankList = [];
      this.keyword = i;
      this.get_data();
    },
    search1(i) {
      this.page = 1;
      this.finished = false;
      this.keyword = i;
    },
    get_data() {
      this.loading_01 = true;
      this.loading = true;
      this.permissions = false;
      this.finished = false;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveProHourRank',
        params: {
          keyword: this.keyword
        }
      })
        .then(response => {
          this.loading_01 = false;
          this.loading = false;
          this.keyword ? (this.isQzss = true) : (this.isQzss = false);
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            this.rankListData = response.data.data;
            this.setData();
          }
        })
        .catch(error => {
          this.loading = false;
          this.loading_01 = false;
          console.log(error);
        });
    },
    setData(){
      this.loading = true;
      let startIdx = (this.page-1) * this.pageSize;
      // console.log(startIdx);
      // console.log(startIdx + this.pageSize);
      this.rankList = this.rankList.concat(this.rankListData.slice(startIdx,startIdx + this.pageSize));
      this.page++;
      setTimeout(()=>{
        this.loading = false;
      });
      // this.finished = false;
    },
    onLoad(){
      // this.loading = false;
      // this.loading = false;
      let totalPage = Math.ceil(this.rankListData.length / this.pageSize);
      if(this.page <= totalPage){
        this.setData();
      }else{
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
#hourRank {
  //   .nothingWl {
  //     padding-bottom: 1.2rem;
  //   }
  // margin-top: 0.266667rem;
  .bottom_Collection {
    width: 100%;
    text-align: center;
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.3467rem;
      line-height: 0.4rem;
      color: #888888;
      span {
        color: #fd7f2c;
        margin-left: 0.1333rem;
      }
    }
  }
  background-color: #f1f1f1;
  // min-height: 100vh;
  .list_box{
    padding-bottom: 1.62rem;
  }
  .listBox {
    width: 100%;
    box-sizing: border-box;
    .itemBox {
      box-sizing: border-box;
      width: 9.2rem;
      height: 3.173333rem;
      background-color: #ffffff;
      border-radius: 0.133333rem;
      margin: 0 auto;
      margin-bottom: 0.186667rem;
      display: flex;
      justify-content: flex-start;
      padding: 0.28rem;
      .itemLeft {
        width: 2.106667rem;
        height: 2.64rem;
        border-radius: 0.266667rem;
        border: solid 1px #e5e5e5;
        position: relative;
        flex-shrink: 0;
        .rank {
          position: absolute;
          top: -0.19rem;
          left: -0.19rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;

          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            text-align: center;
            line-height: 0.56rem;
            color: #666666;
          }
        }
        .rank1 {
          background: #f1f1f1;
          height: 0.466667rem;
          line-height: 0.58rem;
          border-radius: 0.226667rem;
          position: absolute;
          top: -0.183333rem;
          left: -0.133333rem;
          font-size: 0.373333rem;
          padding-left: 0.12rem;
          padding-right: 0.12rem;
          text-align: center;
          font-family: DINPro-Medium;
          color: #666666;
        }
        .avator {
          width: 2.106667rem;
          height: 2.64rem;
          border-radius: 0.266667rem;
          object-fit: cover;
        }
        // 直播中的块
        .liveBox {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 2.1rem;
          height: 0.533333rem;
          background-image: linear-gradient(90deg, #ff005a 1%, #ff31a5 100%),
            linear-gradient(#ffffff, #ffffff);
          background-blend-mode: normal, normal;
          border-radius: 0px 0px 0.266667rem 0.266667rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .liveText {
            font-weight: 600;
            font-size: 0.293333rem;
            color: #ffffff;
          }
        }
      }
      .itemRight {
        flex: 1;
        box-sizing: border-box;
        padding-left: 0.266667rem;
        .titleBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // width: 7rem;
          .shopcartImg {
            width: 0.44rem;
            height: 0.373333rem;
            margin-right: 0.133333rem;
          }
          .redBagImg {
            width: 0.306667rem;
            height: 0.373333rem;
            margin-right: 0.133333rem;
          }
          p {
            width: 5.5rem;
            font-size: 0.4rem;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .talentBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 0.24rem;
          .talentAvator {
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 50%;
            margin-right: 0.133333rem;
            border: solid 1px #e5e5e5;
          }
          p {
            width: 5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.346667rem;
            color: #888888;
          }
        }
        .flexDiv {
          margin-top: 0.306667rem;
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-right: .4rem;
          box-sizing: border-box;
          div {
            text-align: center;
            &:first-child{
              text-align: left;
            }
            &:last-child{
              text-align: left;
            }
            p:nth-of-type(1) {
              font-size: 0.373333rem;
              color: #222222;
              font-family: Dinpro-medium;
              // font-weight: 600;
            }
            p:last-child{
              font-size: 0.293333rem;
              color: #888888;
            }
          }
        }
      }
    }
  }
  .loading_box {
    margin-top: 0.266667rem;
  }
}
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 0.8rem auto 0.2rem auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
</style>